<template>
  <div class="header">
    <a href="/">
      <img class="layout-img" src="../../assets/logo.png" alt="" />
      <span class="layout-title">梦学谷会员管理平台</span>
    </a>
    <el-dropdown @command="handleClick">
      <span class="el-dropdown-link">
        {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="getOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import store from '../../store'
export default {
  data() {
    return {
        username: store.state.userInfo.name
    };
  },
  mounted() {},
  methods: {
      handleClick(val){
          switch (val){
              case 'pwd' :
                  console.log('修改密码');
                  break;
              case 'getOut' :
                  this.getOut();
                  break;
          }
      },
      getOut(){
          store.dispatch('getOut').then(res=>{
              if(res.data.flag){
                  this.$message.success(res.data.message)
                  this.$router.push('/login')
              }else{
                  this.$message.error(res.data.message)
              }
          }).catch(error=>{
              console.log(error);
          })
      }
  },
};
</script>

<style scoped >
.layout-img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  padding-right: 15px;
}
.layout-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  vertical-align: middle;
}
.el-dropdown{
    float: right;
    color: #fff;
}
</style>
